<template>
  <div class="health-prediction-container">
    <div id="healthChart" class="chart-container"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

// 模拟数据生成函数 - 实际应用中可替换为真实数据
const generateData = () => {
  // 初始健康度数据点（前10个点）
  const initialPoints = Array.from({ length: 10 }, (_, i) => ({
    x: 18000 + i * 500,
    y: 0.7 - i * 0.01
  }));
  
  // 预测退化曲线数据
  const predictionPoints = Array.from({ length: 80 }, (_, i) => {
    const x = 22500 + i * 300;
    // 模拟一个非线性退化过程
    const decayFactor = (x - 20000) / 40000;
    const y = 0.65 - Math.pow(decayFactor, 1.2) * 0.64;
    return { x, y };
  });
  
  // 生成95%置信区间的上下边界
  const upperBounds = predictionPoints.map(point => ({
    x: point.x,
    y: Math.min(1, point.y + 0.15 + Math.random() * 0.1)
  }));
  
  const lowerBounds = predictionPoints.map(point => ({
    x: point.x,
    y: Math.max(0, point.y - 0.15 - Math.random() * 0.1)
  }));
  
  return {
    initialPoints,
    predictionPoints,
    upperBounds,
    lowerBounds,
    // 预测寿命终点
    endOfLife: 43739
  };
};

onMounted(() => {
  // 初始化图表
  const chartDom = document.getElementById('healthChart');
  const myChart = echarts.init(chartDom);
  
  // 生成模拟数据
  const { initialPoints, predictionPoints, upperBounds, lowerBounds, endOfLife } = generateData();
  
  // 转换数据格式为ECharts所需的[x, y]格式
  const initialData = initialPoints.map(p => [p.x, p.y]);
  const predictionData = predictionPoints.map(p => [p.x, p.y]);
  const upperData = upperBounds.map(p => [p.x, p.y]);
  const lowerData = lowerBounds.map(p => [p.x, p.y]);
  
  // 配置项
  const option = {
    title: {
      text: '设备健康度退化预测',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        let param = params[0];
        return `时间步长: ${param.name}<br>健康度: ${param.value[1].toFixed(4)}`;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: '时间步长',
      min: 18000,
      max: 45000,
      interval: 5000
    },
    yAxis: {
      type: 'value',
      name: '健康度',
      min: 0,
      max: 1.0,
      interval: 0.2
    },
    series: [
      // 95%置信区间填充
      {
        name: '95% 置信区间',
        type: 'line',
        data: upperData,
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 0
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(255, 167, 196, 0.6)' },
              { offset: 1, color: 'rgba(255, 167, 196, 0.1)' }
            ]
          }
        },
        z: 1
      },
      {
        type: 'line',
        data: lowerData,
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 0
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(255, 255, 255, 0)' },
              { offset: 1, color: 'rgba(255, 255, 255, 1)' }
            ]
          }
        },
        z: 2
      },
      // 预测退化曲线
      {
        name: '预测退化曲线',
        type: 'line',
        data: predictionData,
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: '#ff4d4f',
          width: 2
        },
        z: 3
      },
      // 初始数据点
      {
        name: '初始点',
        type: 'scatter',
        data: initialData,
        symbolSize: 8,
        itemStyle: {
          color: '#22c32e'
        },
        z: 4
      },
      // 报废阈值线
      {
        name: '报废阈值 (0.01)',
        type: 'line',
        data: [[18000, 0.01], [45000, 0.01]],
        lineStyle: {
          type: 'dashed',
          color: '#8c8c8c'
        },
        symbol: 'none',
        z: 0
      },
      // 预测寿命终点线
      {
        name: `预测寿命终点: ${endOfLife}`,
        type: 'line',
        data: [[endOfLife, 0], [endOfLife, 1.0]],
        lineStyle: {
          type: 'dotted',
          color: '#2f4554'
        },
        symbol: 'none',
        z: 0
      }
    ],
    legend: {
      data: [
        '预测退化曲线',
        '95% 置信区间',
        `预测寿命终点: ${endOfLife}`,
        '报废阈值 (0.01)',
        '初始点'
      ],
      top: 30,
      left: 'center',
      orient: 'horizontal'
    }
  };
  
  // 设置配置项
  myChart.setOption(option);
  
  // 响应窗口大小变化
  window.addEventListener('resize', () => {
    myChart.resize();
  });
});
</script>

<style scoped>
.health-prediction-container {
  width: 100%;
  height: 100%;
  min-height: 600px;
  padding: 20px;
  box-sizing: border-box;
}

.chart-container {
  width: 100%;
  height: 100%;
  min-height: 500px;
}
</style>